/*
 * layui的初始化模块可以理解为，引入这个模块的js文件
 * 值得注意的是：layui的模块之间存在依赖关系，例如引入了table模块，它会layui/lay/moudules/table.js
 * 这个文件引入进来，并且它还会将这个模块所依赖的其他模块自动加入进来，
 * 实际引入的模块有：table、form、jquery、layer、laypage、laytpl、util，7个js文件
 * 所以我仅仅初始化了table模块，却能获得form、jquery、layer的模块对象
 */
//layui初始化表格模组
layui.use([ 'table', 'layer' ], function() {
	// 获得模块对象
	var table = layui.table;
	var form = layui.form;
	var $ = layui.jquery;
	var layer = layui.layer;

	// 数据表格渲染
	table.render({
		elem : '#customerTable',
		url : 'system/customers',
		method : 'get',
		where : {} // 你额外要携带数据，以键值对的方式存入
		,
		toolbar : '#customerToolbar' // 开启头部工具栏，并为其绑定左侧模板
		,
		cellMinWidth : 80 // 全局定义所有常规单元格的最小宽度（默认：60）
		,
		cols : [ [ {
			type : 'numbers',
			title : '序号'
		}, {
			type : 'checkbox'
		}, {
			field : 'customerId',
			title : '客户ID'
		}, {
			field : 'customerName',
			title : '客户名'
		}, {
			field : 'customerPhone',
			title : '客户手机号码'
		}, {
			field : 'address',
			title : '地址'
		}, {
			field : 'contactsName',
			title : '联系人名'
		}, {
			field : 'contactsPhone',
			title : '联系人手机'
		}, {
			field : 'contactsAddress',
			title : '联系人地址'
		}, {
			field : 'description',
			title : '描述'
		}, {
			fixed : 'right',
			align : 'center',
			title : '是否可用',
			width : 100,
			templet : '#checkboxTpl',
			unresize : true
		} ] ],
		page : true // 开启分页
		,limit : 10 // 每页显示的条数
		,limits : [ 5, 10, 20, 50, 100 ] // 每页条数的选择项
		,loading : true // 是否显示加载条(切换分页的时候显示）
		,title : '客户数据表' // 定义 table 的大标题（在文件导出等地方会用到）
		,even : false // 隔行变色
	});

	// 头部搜素表单提交
	form.on('submit(customerSearchBtn)', function(data) {
		console.log(data.elem) // 被执行事件的元素DOM对象，一般为button对象
		console.log(data.form) // 被执行提交的form对象，一般在存在form标签时才会返回
		console.log(data.field) // 当前容器的全部表单字段，名值对形式：{name: value}
		// 执行后台代码
		// 刷新数据表格
		table.reload('customerTable', {
			url : 'system/customers',
			where : { // 设定异步数据接口的额外参数，任意设
				customerName : $("#customerNameSearch").val(),
				customerPhone : $("#customerPhoneSearch").val(),
				address : $("#addressSearch").val(),
				contactsName : $("#contactsNameSearch").val(),
				contactsPhone : $("#contactsPhoneSearch").val(),
				contactsAddress : $("#contactsAddressSearch").val(),
			},
			page : {
				curr : 1 // 从第一页开始
			},
			limit : 10
		});
		return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	

	// 新增表单提交
	form.on('submit(addCustomerBtn)', function(data) {
		console.log(data.elem) // 被执行事件的元素DOM对象，一般为button对象
		console.log(data.form) // 被执行提交的form对象，一般在存在form标签时才会返回
		console.log(data.field) // 当前容器的全部表单字段，名值对形式：{name: value}
		// 执行后台代码
		$.ajax({
			type : 'POST',
			async : false,
			url : 'system/customer',
			data : data.field,
			success : function(data) {
				// 关闭页面上所有类型的所有弹框
				layer.closeAll();
				if (data == true) {
					layer.msg("成功！", {
						icon : 1, // 图标，可输入范围0~6
						time : 2500
					// 2秒关闭（如果不配置，默认是3秒）
					});
				} else {
					layer.msg("失败！", {
						icon : 1, // 图标，可输入范围0~6
						time : 2500
					// 2秒关闭（如果不配置，默认是3秒）
					});
				}
			}
		});
		
		// 刷新数据表格
		table.reload('customerTable', {
			url : 'system/customers'
		});
		return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	
	
	// 修改表单提交
	form.on('submit(updateCustomerBtn)', function(data) {
		console.log(data.elem) // 被执行事件的元素DOM对象，一般为button对象
		console.log(data.form) // 被执行提交的form对象，一般在存在form标签时才会返回
		console.log(data.field) // 当前容器的全部表单字段，名值对形式：{name: value}
		// 执行后台代码
		$.ajax({
			type : 'POST',
			async : false,
			url : 'system/customer',
			data : data.field,
			success : function(data) {
				// 关闭页面上所有类型的所有弹框
				layer.closeAll();
				if (data == true) {
					console.log(8888);
					alert("修改成功")
				} else {
					console.log(7777);
					alert("修改失败")
				}
			}
		});
		// 刷新数据表格
		table.reload('customerTable', {
			url : 'system/customers'
		});
		return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});

	// 头工具栏事件
	table.on('toolbar(customerTableEvent)', function(obj) {
		// 获取当前表格选中状态和选中的数据
		var checkStatus = table.checkStatus(obj.config.id);
		// 区分点击的按钮
		switch (obj.event) {
		case 'addCustomer':
			// 弹出新增模态框
			initAddCustomerModal();
			break;
		case 'updateCustomer':
			// 选择的数据数量
			if (checkStatus.data.length > 1) {
				layer.alert('最多也只能选择一行修改');
			} else if (checkStatus.data.length < 1) {
				layer.alert('最少要选择一行修改');
			} else {
				// 弹出修改模态框，传递当前选中的一行数据过去
				initUpdateCustomerModal(checkStatus.data[0]);
			}
			break;
		case 'frozenCustomer':
			// 当前选中行的数据
			var data = checkStatus.data;
			// 调用删除方法，传递要删除的行的数据
			// 定义一个要删除的所有资源ID的字符串
			var customerIdStr = "";
			// 遍历传递过来的要删除的数据
			for (var i = 0; i < data.length; i++) {
				if (data[i].sealSign == 0) {
					alert("所选数据中有被冻结的")
					return;
				}
				// 拿出资源ID进行拼接
				customerIdStr += data[i].customerId + ",";
			}
			// 截取掉因为拼接产生的多余的一个逗号
			customerIdStr = customerIdStr.substring(0, customerIdStr.length - 1);
			freezeOrRecoverCustomer(customerIdStr, 0);
			break;
		case 'recoverCustomer':
			// 当前选中行的数据
			var data = checkStatus.data;
			// 定义一个要删除的所有资源ID的字符串
			var customerIdStr = "";
			// 遍历传递过来的要删除的数据
			for (var i = 0; i < data.length; i++) {
				if (data[i].sealSign == 1) {
					alert("所选数据中有可用的")
					return;
				}
				// 拿出资源ID进行拼接
				customerIdStr += data[i].customerId + ",";
			}
			// 截取掉因为拼接产生的多余的一个逗号
			customerIdStr = customerIdStr.substring(0, customerIdStr.length - 1);
			freezeOrRecoverCustomer(customerIdStr, 1);
			break;
		}
		;
	});

	// 监听锁定操作
	form.on('switch(useable)', function(obj) {
		freezeOrRecoverCustomer(obj.value, this.checked == true ? 1 : 0);
	});
	// 关闭模态框 新增和修改模态框共用这个点击事件
	$(".modalClose").click(function() {
		// 关闭页面上所有类型的所有弹框
		layer.closeAll();
	});
	var freezeOrRecoverCustomer = function(customerIdStr, status) {
		// 客户ID
		var customerId = customerIdStr;
		// 定义提示信息, 状态
		var msg, customerStatus;
		if (status == 1) {
			msg = "还原", customerStatus = 1;
		} else {
			msg = "禁用", customerStatus = 0;
		}
		// 发送异步请求冻结或还原资源
		$.ajax({
			async : false, // 默认为true，false表示同步，如果当前请求没有返回则不执行后续代码
			type : "post",
			url : 'system/customer' + customerId + "/" + customerStatus,
			data : {
				_method : 'DELETE'
			},
			datatype : 'json',
			success : function(result) {
				if (result == "success") {
					layer.msg(msg + "成功！", {
						icon : 1, // 图标，可输入范围0~6
						time : 2500
					// 2秒关闭（如果不配置，默认是3秒）
					});
				} else {
					layer.msg(msg + "失败！", {
						icon : 2,
						time : 2500
					});
				}
				// 刷新数据表格
				table.reload('customerTable', {
					url : 'system/customers'
				});
			}
		});
	}

	// 初始化新增模态框
	var initAddCustomerModal = function() {
		openModal({ //弹模态框调用方法模板（修改值即可）
			modalId: 'addCustomerModal', // 模态框id不用加 # 符号
			ajaxType: 'post', // ajax请求方式
			ajaxUrl: 'system/customer', // ajax请求地址
			ajaxAsync: true, // ajax是否异步请求
			reloadTabId: 'customerTable', // 刷新表数据的表 id 不用加 # 符号
			reloadTabUrl: 'system/customers', // 刷新表数据请求的url
			layOpen: { //把自己的layer.open({...})里面的东西复制进来
				type: 1, // 基本层类型0~4，1为页面层
				title: '添加客户', // 标题
				area: ['450px', '550px'], // 宽高 只写一个参数就是表示宽度，高度会自适应
				content: $("#addCustomerModal"), // 文本、html都行
				anim: 0, // 弹出动画
				resize: false, // 是否允许拉伸
				btnAlign: 'c', //按钮居中
				//---------
				btn: ['立即提交', '关闭'] //就两个按钮不用附带函数（!--注意：这个必须有--!）
			},
			ifOk: {
				funName: addOkFun, // 提交成功回调函数名（不能是数字和字符串也不能带括号，有模板函数fun1/自定义）
				parameter: {} // 传入提交成功回调函数的参数json
			},
			ifErr: {
				funName: addErrFun, // 提交失败回调函数名（不能是数字和字符串也不能带括号，有模板函数fun2/自定义）
				parameter: {} // 传入提交失败回调函数的参数json
			},
			modalFormVerify: { // 校验
				funName: addVerifyFun, // 校验函数名（不能是数字和字符串也不能带括号，返回值必须是true才能提交，有模板函数fun3/自定义）
				parameter: {} // 传入校验函数的参数json
			}
		})
		
	}

	// 初始化修改模态框
	var initUpdateCustomerModal = function(data) {
		openModal({ //弹模态框调用方法模板（修改值即可）
			modalId: 'updateCustomerModal', // 模态框id不用加 # 符号
			ajaxType: 'post', // ajax请求方式
			ajaxUrl: 'system/customer', // ajax请求地址
			ajaxAsync: true, // ajax是否异步请求
			reloadTabId: 'customerTable', // 刷新表数据的表 id 不用加 # 符号
			reloadTabUrl: 'system/customers', // 刷新表数据请求的url
			layOpen: { //把自己的layer.open({...})里面的东西复制进来
				type: 1, // 基本层类型0~4，1为页面层
				title: '修改客户', // 标题
				area: ['450px', '550px'], // 宽高 只写一个参数就是表示宽度，高度会自适应
				content: $("#updateCustomerModal"), // 文本、html都行
				anim: 0, // 弹出动画
				resize: false, // 是否允许拉伸
				btnAlign: 'c', //按钮居中
				//---------
				btn: ['立即提交', '关闭'] //就两个按钮不用附带函数（!--注意：这个必须有--!）
			},
			ifOk: {
				funName: updateOkFun, // 提交成功回调函数名（不能是数字和字符串也不能带括号，有模板函数fun1/自定义）
				parameter: {} // 传入提交成功回调函数的参数json
			},
			ifErr: {
				funName:updateErrFun, // 提交失败回调函数名（不能是数字和字符串也不能带括号，有模板函数fun2/自定义）
				parameter: {} // 传入提交失败回调函数的参数json
			},
			modalFormVerify: { // 校验（无校验可不要/删掉,建议:写校验函数,！--注意：该上传非submit提交，layui的表单校验无效--！）
				funName: updateVerifyFun, // 校验函数名（不能是数字和字符串也不能带括号，返回值必须是true才能提交，有模板函数fun3/自定义）
				parameter: {} // 传入校验函数的参数json
			}
		})
		

		// 表单赋值
		form.val('updateCustomerForm', {
			"customerId" : data.customerId,
			"customerName" : data.customerName,
			"customerPhone" : data.customerPhone,
			"address" : data.address,
			"contactsName" : data.contactsName,
			"contactsPhone" : data.contactsPhone,
			"contactsAddress" : data.contactsAddress,
			"description" : data.description
		});
	}
	

	
	// 提交成功回调函数模板
	function addOkFun(e) {
		if(e.respData == 1) {
			layer.closeAll();
			layer.msg("添加成功", {
				icon: 1, //图标，可输入范围0~6
				time: 2500 //2秒关闭（如果不配置，默认是3秒）
			});
		} else {
			layer.msg("添加失败，请重试！", {
				icon: 1, //图标，可输入范围0~6
				time: 2500 //2秒关闭（如果不配置，默认是3秒）
			});
		}
		table.reload('customerTable', {
			url: 'system/customers'
		});
	}

	
	// 提交失败回调函数模板
	function addErrFun() {
		layer.msg("添加失败，请重试！", {
			icon: 1, //图标，可输入范围0~6
			time: 2500 //2秒关闭（如果不配置，默认是3秒）
		});
	}

	
	// 表单校验函数模板
	function addVerifyFun() {
		var verifyOkNum = 0; //定义校验通过数量

		//自定义校验方法
		myVerify({
			addCustomerName: function(value) {
				/*if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
					return '组织名不能有特殊字符';
				} else if(/(^\_)|(\__)|(\_+$)/.test(value)) {
					return '组织名首尾不能出现下划线\'_\'';
				} else if(/^\d+\d+\d$/.test(value)) {
					return '组织名不能全为数字';
				}*/
				/* else if(从数据库查组织结构名函数的返回值（组织id） != 隐藏域里的组织结构id && 从数据库查组织结构名函数的返回值（组织id） != "") {
					return '该组织名已存在';
				}*/
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			addCustomerPhone: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			addAddress: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			addContactsName: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			addContactsPhone: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			addContactsAddress: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			}
		});
		//
		if(verifyOkNum == 6) { //当校验通过数量==要校验的数量时返回true
			return true;
		} else {
			return false;
		}
	}
	
	
	// 提交成功回调函数模板
	function updateOkFun(e) {
		if(e.respData == 1) {
			layer.closeAll();
			layer.msg("修改成功", {
				icon: 1, //图标，可输入范围0~6
				time: 2500 //2秒关闭（如果不配置，默认是3秒）
			});
		} else {
			layer.msg("修改失败，请重试！", {
				icon: 1, //图标，可输入范围0~6
				time: 2500 //2秒关闭（如果不配置，默认是3秒）
			});
		}
		table.reload('customerTable', {
			url: 'system/customers'
		});
	}

	
	// 提交失败回调函数模板
	function updateErrFun() {
		layer.msg("修改失败，请重试！", {
			icon: 1, //图标，可输入范围0~6
			time: 2500 //2秒关闭（如果不配置，默认是3秒）
		});
	}

	
	// 表单校验函数模板
	function updateVerifyFun() {
		var verifyOkNum = 0; //定义校验通过数量

		//自定义校验方法
		myVerify({
			updateCustomerName: function(value) {
				/*if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
					return '组织名不能有特殊字符';
				} else if(/(^\_)|(\__)|(\_+$)/.test(value)) {
					return '组织名首尾不能出现下划线\'_\'';
				} else if(/^\d+\d+\d$/.test(value)) {
					return '组织名不能全为数字';
				}*/
				/* else if(从数据库查组织结构名函数的返回值（组织id） != 隐藏域里的组织结构id && 从数据库查组织结构名函数的返回值（组织id） != "") {
					return '该组织名已存在';
				}*/
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			updateCustomerPhone: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			updateAddress: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			updateContactsName: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			updateContactsPhone: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			},
			updateContactsAddress: function(value) {
				if(value == '') {
					return "地址不能为空！";
				} else {
					verifyOkNum++;
					return null;
				}
			}
		});
		//
		if(verifyOkNum == 6) { //当校验通过数量==要校验的数量时返回true
			return true;
		} else {
			return false;
		}
	}

	
	function openModal(modalDatas) {
		if(typeof(modalDatas.selectList) !== 'undefined') {
			loadOption(modalDatas.selectList);
		}
		modalDatas.layOpen['btn1'] = function(index, layero) { //（btn1：‘立即提交’）   回调函数
			if(modalDatas.modalFormVerify != '' && typeof(modalDatas.modalFormVerify) !== 'undefined') {
				if(typeof(modalDatas.modalFormVerify.funName) === 'function' && modalDatas.modalFormVerify.funName(modalDatas.modalFormVerify.parameter) == true) {
					setModalAjaxData();
				} else {
					console.log('你的校验未通过！')
				}
			} else {
				setModalAjaxData();
			}
		};
		modalDatas.layOpen['btn2'] = function(index, layero) { //（btn2：‘关闭’） 回调函数
			//关闭页面上所有类型的所有弹框
			layer.closeAll();
		};
		modalDatas.layOpen['end'] = function() { // 弹出层销毁时的回调函数（不论何种方式，只要关闭了就执行）
			$("#" + modalDatas.modalId + " form")[0].reset();
			if(typeof(modalDatas.selectList) !== 'undefined') {
				claseOption(modalDatas.selectList); //在''里面填要清空的select的id
			}
		};

		layer.open(modalDatas.layOpen);

		function setModalAjaxData() {
			var formData = {};
			$.map($("#" + modalDatas.modalId + " form").serializeArray(), function(object, index) {
				formData[object['name']] = object['value'];
			});
			if(modalDatas.ajaxType == '' || typeof(modalDatas.ajaxType) === 'undefined') {
				modalDatas.ajaxType = 'post';
			}
			if(modalDatas.ajaxAsync == '' || typeof(modalDatas.ajaxAsync) === 'undefined') {
				modalDatas.ajaxAsync = true;
			}
			modalAjax({
				formData: formData,
				thisType: modalDatas.ajaxType,
				thisUrl: modalDatas.ajaxUrl,
				thisAsync: modalDatas.ajaxAsync,
				thisOkFun: {
					funName: modalDatas.ifOk.funName,
					parameter: modalDatas.ifOk.parameter
				},
				thisErrFun: {
					funName: modalDatas.ifErr.funName,
					parameter: modalDatas.ifErr.parameter
				}
			});
		}

		//提交表单函数
		function modalAjax(modalSubmitData) {
			$.ajax({
				type: modalSubmitData.thisType,
				url: modalSubmitData.thisUrl,
				async: modalSubmitData.ajaxAsync,
				data: modalSubmitData.formData,
				dataType: 'json',
				success: function(respData) {
					if(typeof(modalSubmitData.thisOkFun.funName) === 'function') {
						modalSubmitData.thisOkFun.funName({
							respData: respData,
							parameter: modalSubmitData.thisOkFun.parameter
						});
					}
				},
				error: function() {
					if(typeof(modalSubmitData.thisErrFun.funName) === 'function') {
						modalSubmitData.thisErrFun.funName(modalSubmitData.thisErrFun.parameter);
					}
				}
			});
		}

		function addOption(obj) {
			if(obj.respData != '' && typeof(obj.respData) != 'undefined') {
				$.each(obj.respData, function(index, o) {
					$("#" + modalDatas.modalId + " #" + obj.parameter.selectId).append(new Option(o[obj.parameter.optionTxt], o[obj.parameter.optionVal]));
				});
				form.render(); //渲染将option添加进去
			}
		}
		//清空select的option方法
		function claseOption(selectList) {
			if(typeof(selectList) !== 'undefined') {
				$.each(selectList, function(index, o) {
					if(o.selectId != '' && typeof(o.selectId) !== 'undefined') {
						$("#" + modalDatas.modalId + " #" + o.selectId).html("<option value=''></option>");
					}
				});
			}
		}

		function loadOptionErr() {
			layer.msg("请求超时，数据加载失败！", {
				icon: 5,
				time: 2500
			});
		}

		//清空select的option方法
		function loadOption(selectList) {
			$.each(selectList, function(index, o) {
				if(o.selectId != '' && typeof(o.selectId) != undefined) {
					if(o.selectType == '' || typeof(o.selectType) === 'undefined') {
						o.selectType = 'get';
					}
					modalAjax({
						formData: {},
						thisType: o.selectType,
						thisUrl: o.selectUrl,
						thisAsync: false,
						thisOkFun: {
							funName: addOption,
							parameter: o
						},
						thisErrFun: {
							funName: loadOptionErr
						}
					});
				}
			});
		}
	}
	
	
	// 自定义校验方法
	function myVerify(myVerifyData) { //自定义校验方法
		if(typeof(myVerifyData) !== 'undefined' && myVerifyData != '') {
			$.each(myVerifyData, function(name) {
				var myVerifyReturnVal = myVerifyData[name]($("input[my-verify=" + name + "]").val());
				if(myVerifyReturnVal != null && typeof(myVerifyReturnVal) !== 'undefined') {
					//"<div style='position: relative'><span style='color: red; font-size: 12px; position: absolute;'>"+$("input[my-verify=" + name + "]").val()+"</span></div>"
					$("input[my-verify=" + name + "]").css('border-color', 'rgb(255,87,34)');
					$("input[my-verify=" + name + "]").next().remove();
					$("input[my-verify=" + name + "]").parent().append("<div class='myVerifyErr' style='position: relative'><span style='color: red; font-size: 12px; position: absolute;'>" + myVerifyData[name]($("input[my-verify=" + name + "]").val()) + "</span></div>")
				}
			});
			setTimeout(removeMyVerifyErr, 2000);

			function removeMyVerifyErr() {
				$(".myVerifyErr").remove();
				$("form input[name!='button']").css('border-color', 'rgb(230,230,230)');
			}
		}
	}
});
